<template>
    <view class="container">
        <view class="header-type-box" data-flex="box:mean">
            <view v-for="(item,index) in typeList" @click="typeIndex = index" :class="typeIndex == index ? 'one-type sel' : 'one-type'" :key="index">
                {{item.name}}
            </view>
        </view>
        <view style="height: 80upx;background-color: #5AC2FF;"></view>
        <search to="/pages/langwen/search"></search>
        <view v-show="typeIndex == 0">
            <view class="header-box">
                <swiper class="carousel" circular indicator-dots="true" autoplay interval="3000"
				 indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="rgba(255, 255, 255, 1)">
                    <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="carouselHandle(item)">
                        <image :src="item.bannerUrl"></image>
                    </swiper-item>
                </swiper>
            </view>
            <view class="cate-section">
                <view class="cate-item" v-for="(item,index) in cateList" v-if="index < 9" :key="index">
                    <view @click="cateHandle(item.id, item.name)">
                        <image :src="item.icon"></image>
                        <view style="text-align:center">{{ item.name }}</view>
                    </view>
                </view>
                <view class="cate-item" v-if="cateList.length > 9">
                    <view @click="cateAllHandle">
                        <image src="/static/temp/c1.png"></image>
                        <view style="text-align:center">全部分类</view>
                    </view>
                </view>
            </view>
            <view class="floor-list" v-if="rushBuy.length > 0">
                <view class="recommend buy">
                    <view class="header">
                        <view class="title" data-flex>
                            <image class="s-img" src="/static/temp/secskill-img.png" mode="widthFix"></image>
                            <!-- <view class="buy-info" data-flex>
                                <text class="time">12点场</text>
                                <text class="leave">05:34:21</text>
                            </view> -->
                        </view>
                        <view class="right-btn" @click="timingBuyHandle">
                            查看全部
                            <image class="img" src="/static/langwen/arrow_right_3.png" mode=""></image>
                        </view>
                    </view>
                    <view class="main">
                        <!-- 商品列表 -->
                        <item :item="goods" v-for="(goods, goodsIndex) in rushBuy" :key="goodsIndex"></item>
                    </view>
                </view>
            </view>
            <view class="floor-list" v-for="(floor, index) in floorList" v-if="(floor.relationType == 1 && floor.goods) || (floor.relationType != 1 && floor.posterUrl)"  :key="index">
                <view class="recommend">
                    <view class="header">
                        <view class="title">
                            <text>{{ floor.floorName }}</text>
                        </view>
                        <view class="right-btn" v-if="floor.goods && floor.relationType == 1" @click="floorHandle(floor.floorName,floor.floorId)">
                            查看全部
                            <image class="img" src="/static/langwen/arrow_right_3.png" mode=""></image>
                        </view>
                    </view>
					<view v-if="floor.relationType == 1" class="main">
					    <!-- 商品列表 -->
					    <item :item="goods" v-for="(goods, goodsIndex) in floor.goods" :key="goodsIndex"></item>
					</view>
                    <view v-else>
                        <!-- 图片 -->
                        <img class="floor-img" :src="floor.posterUrl" @click="floorImgHandle(floor)" alt="">
                    </view>
                </view>
            </view>
        </view>
        <view v-show="typeIndex == 1">
            <!-- 精选 -->
            <filters recommandStatus="1" ref="filters"></filters>
        </view>
        <view v-show="typeIndex == 2" style="background-color: #F5F5F5;">
            <!-- 活动 -->
            <activity ref="activity"></activity>
        </view>
        <view v-show="typeIndex == 3" class="type-3">
            <!-- 上新 -->
            <newGoods ref="newGoods"></newGoods>
        </view>
        <view v-show="typeIndex == 4">
            <!-- 动态 -->
            <notice ref="notice"></notice>
        </view>
    </view>
</template>

<script>
import Api from '@/common/api';
import search from '@/components/langwen/search.vue';
import item from '@/components/langwen/item.vue';
import notice from '@/components/langwen/notice.vue';
import filters from '@/components/langwen/filter.vue';
import activity from '@/components/langwen/activity.vue';
import newGoods from '@/components/langwen/newGoods.vue';
export default {
    name: 'index',
    components: {
        search,
        item,
        filters,
        notice,
        activity,
        newGoods
    },
    data() {
        return {    
            // 导航
            typeList: [{
                name: '首页'
            }, {
                name: '精选'
            }, {
                name: '活动'
            }, {
                name: '上新'
            }, {
                name: '动态'
            }],
            // 导航选中
            typeIndex: 0,
            // 首页轮播数据
            carouselList: '',
            // 首页一级分类数据
            cateList: '',
            // 首页限时抢购数据
            rushBuy: '',
            // 首页楼层数据
            floorList: '',
        }
    },
    created() {
        // 轮播
        this.getCarouselList();
        // 分类
        this.getCateList();
        // 限时抢购
        this.getRushBuy();
        // 楼层
        this.getFloorList(); 
    },
	beforeCreate() {
		uni.switchTab({
		    url: `/pages/langwen/index`
		});
	},
    onShow() {
        this.typeIndex = 0;
    },
	// 下拉刷新回调函数
	onPullDownRefresh() {
		if(this.typeIndex === 0) {
			// 轮播
			this.getCarouselList();
			// 分类
			this.getCateList();
			// 限时抢购
			this.getRushBuy();
			// 楼层
			this.getFloorList();
		} else if(this.typeIndex === 1) {
			this.$refs.filters.getListData('headerRefreshing');
		} else if(this.typeIndex === 2) {
			this.$refs.activity.getActivityList();
		} else if(this.typeIndex === 3) {
			this.$refs.newGoods.getNewList('headerRefreshing');
		} else if(this.typeIndex === 4) {
			this.$refs.notice.getNoticeList('headerRefreshing');
		}
		uni.stopPullDownRefresh();
	},
	// 上拉加载
	onReachBottom() {
		if(this.typeIndex === 1) {
			this.$refs.filters.getListData('load');
		} else if(this.typeIndex === 3) {
			this.$refs.newGoods.getNewList('load');
		} else if(this.typeIndex === 4) {
			this.$refs.notice.getNoticeList('load');
		}
	},
    methods: {
        // 轮播
        carouselHandle(item) {
			if(item.outUrl) {
				// 路径
				var url = '/pages/langwen/iframe';
				// 参数 
				var param = {
					outUrl: item.outUrl
				};
				uni.navigateTo({
				    url: `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
				});
			}else if(item.contentSource == 3) {
                var id = item.contextIdValue;
                uni.navigateTo({
                	url: `/pages/langwen/detail?id=${id}`
                });
            }
        },
        // 分类
        cateHandle(id, name) {
            // 路径
            var url = '/pages/langwen/sort2';
            // 参数 
            var param = {
                lev1Id: id, // 选中一级分类
				lev1Title: name, // 选中一级标题
                lev2: 0, // 选中二级分类
                lev3: '' // 选中三级分类
            };
            uni.navigateTo({
                url: `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
            });
        },
        // 全部分类
        cateAllHandle() {
            // 路径
            var url = '/pages/langwen/sort';
            uni.switchTab({
                url: `${url}`
            });
        },
        // 限时秒杀
        timingBuyHandle() {
            // 路径
            var url = '/pages/langwen/timingBuy';
            // 参数
            var param = {};
            uni.navigateTo({
                url: `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
            });
        },
        // 楼层
        floorHandle(floorName,floorId) {
            // 路径
            var url = '/pages/langwen/floor';
            // 参数
            var param = {
                title: floorName,
                id: floorId
            };
            uni.navigateTo({
                url: `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
            });
        },
		// 楼层图片
		floorImgHandle(floor) {
			if(floor.relationType == 3) {
				// 路径
				var url = '/pages/langwen/richtxtDetail';
				// 参数 
				var param = {
				    id: floor.newsId
				};
			} else {
				// 路径
				var url = '/pages/langwen/sort2';
				// 参数 
				var param = {
				    lev1Id: floor.categoryId,
					lev1Title: floor.categoryName,
					lev2: 0,
					lev3: ''
				};
			}
			uni.navigateTo({
			    url: `${url}?param=${encodeURIComponent(JSON.stringify(param))}`
			});
		},
        // 获取轮播数据
        async getCarouselList() {
            var params = {
				bannerPositionId: '3'
			};
            var data = await Api.APPCall('get', Api.index.banners, params);
            this.carouselList = data.listData;
        },
        // 获取分类数据
        async getCateList() {
            var params = {
                'parentId': '0',    
                'pageNum': 1,
                'pageSize': 100
            };
            var data = await Api.apiCall('get', Api.sort.findSort, params);
            this.cateList = data;
        },
        // 获取限时抢购数据
        async getRushBuy() {
            var params = {
                'dateParam': '',
                'pageNum': 1,
                'pageSize': 10
            };
            var data = await Api.apiCall('get', Api.index.timingBuyList, params);
            this.rushBuy = data.records;
        },
        // 获取首页楼层数据
        async getFloorList() {
            var params = {
                'limited': 10
            };
            var data = await Api.apiCall('get', Api.index.floorList, params);
            this.floorList = data;
        }
    }
}
</script>

<style lang="scss">
    .type-3 {
        background-color: #F5F5F5;
        .section-box {
            margin: 0;
            background-color: #F5F5F5;
        }
        
        .section-title {
            background-color: #F5F5F5;
            height: 90upx;
            line-height: 90upx;
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .section-box  .list-container {
            box-shadow: none;
            border-radius:10px;
        }
    }
    .list-header {
        padding: 10upx 0;
        img {
            width: 44upx;
            height: auto;
            height: 4px;
        }
        text {
            margin: 0 20upx;
            font-size:18px;
            font-weight:500;
            color:rgba(90,194,255,1);
        }
    }
    .section-box {
        background-color: #fff;
        margin-bottom: 20upx;
        .list-container {
            box-shadow:0px -2px 8px 0px rgba(0,0,0,0.1);
        }
        .show-box {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size:14px;
            font-weight:400;
            color:rgba(253,155,67,1);
            padding-bottom: 30upx;
            background-color: #fff;
            img {
                margin-left: 10rpx;
                width: 24rpx;
                height: 24rpx;
            }
        }
    }
    .section-title {
        text-align: center;
        font-size:12px;
        font-weight:400;
        color:rgba(51,51,51,1);
    }
    .sec-header {
        display: flex;
        justify-content: space-between;
        color: #fff;
        margin: 30upx 30upx 0;
        background:linear-gradient(270deg,rgba(255,158,53,1) 0%,rgba(255,101,24,1) 100%);
        border-radius:10px 10px 0px 0px;
        padding: 0 26rpx;
        .sec-left {
            view {
                margin: 12upx 0 4upx;
                font-size:14px;
            }
            text {
                font-size:11px;
                vertical-align: text-top;
            }
        }
        .sec-right {
            margin-top: 22upx;
            font-size:12px;
            font-weight:500;
        }
    }
    .list-container {
    	display: flex;
        flex-wrap: wrap;
    	background:rgba(255,255,255,1);
    	box-shadow:0px 2rpx 16rpx 0px rgba(0,0,0,0.02);
    }
    .floor-list {
        background-color: #F5F5F5;
        padding-bottom: 10px;
        .floor-img {
            vertical-align: top;
            width: calc(100% - 80upx);
            height: auto;
            margin: 0 40upx;
            margin-bottom: 30upx;
            box-sizing: border-box;
			border-radius: 6px;
        }
    }
    .one-type.sel {
        position: relative;
        font-size: 32upx;
        font-weight: 500;
        &::after {
            content: ' ';
            position: absolute;
            left: 50%;
            bottom: 3px;
            width: 40upx;
            height: 6upx;
            border-radius: 4upx;
            background-color: #fff;
            transform: translateX(-50%);
        }
    }
    page {
        .header-type-box {
            position: fixed;
            top: 80upx;
            left: 0;
            right: 0;
            height: 80upx;
            z-index: 9;
            background-color: #5AC2FF;
            color: #fff;
            text-align: center;
            line-height: 80upx;
            font-size: 30upx;
        }

        .header-box {
            background-image: url(../../static/index_bg.png);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position-y: -1px;
            background-color: #F5F5F5;

            .uni-searchbar {
                background-color: rgba(0, 0, 0, 0);
            }
        }

        .cate-section {
            position: relative;
            z-index: 5;
            border-radius: 16upx 16upx 0 0;
        }
    }

    .carousel {
        width: 100%;
        height: 280upx;
        .carousel-item {
            width: 100%;
            height: 100%;
            padding: 0 28upx;
            overflow: hidden;
        }
        image {
            width: 100%;
            height: 100%;
            border-radius: 10upx;
        }
    }

    /* 分类 */
    .cate-section {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 30upx 22upx 10upx;
        background: #F5F5F5;

        .cate-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: $font-sm + 2upx;
            color: $font-color-dark;
            width: 20%;
            margin-bottom: 20upx;
        }

        /* 原图标颜色太深,不想改图了,所以加了透明度 */
        image {
            display: block;
            width: 88upx;
            height: 88upx;
            margin: 0 auto 14upx auto;
            border-radius: 50%;
            opacity: 0.7;
            box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
        }
    }

    .recommend {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.02);
        border-radius: 6px;
        &.buy {
            .header .title {
                .s-img {
                    width: 162rpx;
                    height: 32rpx;
                    margin-right: 20rpx;
                }
                .buy-info {
                    width: 220rpx;
                    height: 36rpx;
                    border-radius: 18rpx;
                    border: 1rpx solid #FF6518;
                    line-height: 36rpx;
                     font-size: 22rpx;
                    .time {
                        width: 100rpx;
                        text-align: center;
                        color: #fff;
                        background-color: #FF6518;
                        display: block;
                    }
                    .leave {
                        padding-right: 8rpx;
                        width: 120rpx;
                        text-align: right;
                        color: #FF6518;
                        display: block;
                    }
                }
            }
        }
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30upx 40upx;
        .title {
            font-size: 16px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }
    
        .right-btn {
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            .img {
                width: 15px;
                height: 15px;
            }
        }
    }
    .main {
        display: flex;
        padding-bottom: 15px;
        overflow: auto;
        .item {
        	width: 80px;
        	margin: 0 15px;
            box-sizing: content-box;
            &:last-child {
                padding-right: 15px;
            }
        }
    }
</style>
